<template>
  <div class="livesalelistBox">
    <div class="serchWrap">
      <div class="serchInput">
        <div class="serchInput_left">
          <div class="serchInput_suzzy">
            <el-input v-model="serchFrom.fuzzyQuery" placeholder="模糊搜素" />
          </div>

          <div class="serchInput_range">
            <p>商品价格区间</p>
            <div class="serchInput_range_input">
              <el-input v-model="serchFrom.priceRange" placeholder="最低价格" />
              <el-input v-model="serchFrom.priceRange" placeholder="最高价格" />
            </div>
          </div>
        </div>
        <div class="serchInput_right">
          <div class="serchInput_right_top">
            <div class="serchInput_right_top_type">
              <p>商品分类</p>
              <el-select>
                <el-option value="1"></el-option>
              </el-select>
            </div>
          </div>

          <div class="serchInput_range">
            <p>查询时间段</p>

            <el-date-picker
              v-model="serchFrom.projectedProfitRange"
              type="datetimerange"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              format="YYYY-MM-DD HH:mm:ss"
              date-format="YYYY/MM/DD ddd"
              time-format="A hh:mm:ss"
            />
          </div>
        </div>
      </div>

      <div class="serchBtn">
        <el-button :icon="Search" type="primary">查询</el-button>
        <br />
        <el-button :icon="RefreshRight" type="warning">重置</el-button>
      </div>
    </div>
    <br />
    <el-button>导出</el-button>
    <el-button type="primary">数据对比</el-button>

    <div class="tableWrap">
      <el-row>
        <el-col :span="24">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column type="index" label="序号" />
            <el-table-column prop="liveStreamDate" label="直播日期" />
            <el-table-column prop="liveStreamTime" label="直播时间" />
            <el-table-column prop="orderPlacedUserID" label="下单用户ID" />
            <el-table-column prop="orderUserNickname" label="下单用户昵称" />
            <el-table-column prop="orderPlacedTime" label="下单时间" />
            <el-table-column prop="productCategory" label="商品分类" />
            <el-table-column prop="orderItems" label="下单商品" />
            <el-table-column prop="orderAmount" label="下单金额" />
            <el-table-column prop="orderStatus" label="订单状态" />
            <el-table-column label="操作">
              <a href="javascript:void(0)">查看</a>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Search, RefreshRight } from "@element-plus/icons-vue";
import { reactive } from "vue";
const serchFrom = reactive({
  fuzzyQuery: "", //模糊查询
  productType: "", //商品分类
  salesAuthority: "", //带货权限
  priceRange: "", //价格区间
  projectedProfitRange: "", //预计收益区间
});
const tableData = reactive([
  {
    liveStreamDate: "2024/09/17", //直播日期
    liveStreamTime: "22:08:36-23:25:56", //直播时间
    orderPlacedUserID: "1609463659", //下单用户ID
    orderUserNickname: "晨茜", //下单用户昵称
    orderPlacedTime: "2024/09/17 20:51:40 ", //下单时间
    productCategory: "数码外设", //商品分类
    orderItems: "纽曼 (Newmine) MC87无线领夫麦克风主播直播录音设备户外抖", //下单商品
    orderAmount: "￥1,435", //下单金额
    orderStatus: "未支付", //订单状态
  },
]);
</script>

<style lang="scss" scoped>
:deep(.cell) {
  text-align: center;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
:deep(.el-table .el-table__body td) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.example-basic .el-date-editor {
  margin: 8px;
}
:deep() .tableWrap {
  font-size: 14px;
  width: 100%;
  margin-top: 16px;
}
.serchInput_right {
  font-size: 14px;
  color: #4e5969;
  font-weight: normal;
  display: flex;
  flex-direction: column;
  > div {
    margin-top: 10px;

    width: 60%;
  }
}
.serchInput_left {
  display: flex;
  flex-direction: column;
  > div {
    margin-top: 10px;
    width: 60%;
  }
}

.serchInput_suzzy {
  width: 100%;
}
.serchInput_right_top {
  > .serchInput_right_top_type {
    display: flex;
    > p {
      flex: 1;
    }
    > div {
      flex: 3;
    }
  }
}
.serchWrap {
  display: flex;
  justify-items: space-between;
  align-items: center;
  p {
    width: -webkit-fill-available;
    margin: 0;
    font-family: Alibaba PuHuiTi 3;
    font-size: 14px;
    font-weight: normal;
    line-height: 28px;
    letter-spacing: 0px;
    text-align: left;
  }
}
.serchInput {
  flex: 7;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  > div {
    flex: 1;
  }
}
.serchBtn {
  flex: 1;
  border-left: 1px solid gray;
  // width: 15%;
  text-align: center;
  > button:nth-of-type(2) {
    margin-top: 20px;
  }
}
a {
  color: #165dff;
}
.serchInput_range {
  display: flex;
  > p {
    flex: 1;
    display: block;
    text-wrap: nowrap;
    margin-right: 16px;
  }
  > div {
    flex: 3;
    display: flex;
  }
}
</style>
